<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./页面样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="box">
        <div class="shang">
            <img src="./fruit.jpg">
        </div>
        <p class="s1"><span class="iconfont icon-fangzi"></span>/购物车</p>
        <table style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>选中</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td><img src="./榴莲.png"></td>
                    <td></td>
                    <td>
                        <button onclick="jian()" style="width: 30px; height: 30px;">-</button>
                        <span><input type="text" style="width: 50px; height: 30px;" class="gs"></span>
                        <button onclick="jia()" style="width: 30px; height: 30px;">+</button>
                    </td>
                    <td></td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;">删除</button></td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                <td colspan="3" class="s2"><input type="checkbox" name="" id="" onclick="qx(this)" class="fx">    全选</td>
                    <td colspan="2">总价 : ￥ <span style="color: rgb(255, 104, 180); font-size: 35px;" class="zj"></span></td>
                    <td><button style="background-color: rgb(63, 133, 237); color: white; width: 100px;height: 40px; border: none;">结算<span class="sl"></span></button></td>
                </tr>
            </tfoot>
        </table>
        <div class="kong">🛒空空如也</div>
    </div>
</body>
</html>
<script>
    const dataArr = [
      {
        id: 1,
        icon: './火龙果.png',
        isChecked: true,
        num: 2,
        price: 6,
      },
      {
        id: 2,
        icon: './荔枝.png',
        isChecked: false,
        num: 7,
        price: 20,
      },
      {
        id: 3,
        icon: './榴莲.png',
        isChecked: false,
        num: 3,
        price: 40,
      },
      {
        id: 4,
        icon: './鸭梨.png',
        isChecked: true,
        num: 10,
        price: 3,
      },
      {
        id: 5,
        icon: './樱桃.png',
        isChecked: false,
        num: 20,
        price: 34,
      },
    ]
    var tbody=document.querySelector('tbody')
    
    
    //渲染
    function xr(){
        const strArr=dataArr.map((ele,index)=>{
            return `
                <tr>
                    <td><input type="checkbox" name="" id="" ${ele.isChecked ? "checked" : " "} class="fxs"></td>
                    <td><img src="${ele.icon}"></td>
                    <td>${ele.price}</td>
                    <td>
                        <button onclick="jian(${index})" style="width: 30px; height: 30px;">-</button>
                        <span><input type="text" style="width: 50px; height: 30px; text-align="center"" class="gs" value="${ele.num}"></span>
                        <button onclick="jia(${index})" style="width: 30px; height: 30px;">+</button>
                    </td>
                    <td>${(ele.price*ele.num)}</td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;" onclick="del(${index})">删除</button></td>
                </tr>
            `
        }).join("")
        tbody.innerHTML=strArr
        let zj=document.querySelector('.zj')
        let sl=document.querySelector('.sl')
        let newArr=dataArr.filter(ele=>ele.isChecked)
        // console.log(newArr);
        
        let count=newArr.reduce((nums,item)=>nums+item.num,0) 
        let doller=newArr.reduce((nums,item)=>nums+item.num*item.price,0)
        zj.innerHTML=doller.toFixed(2)
        sl.innerHTML=count
        var kong=document.querySelector('.kong')
        kong.style.display=dataArr.length===0?"block":"none"
    }
    xr()
    function qx(fx){
        var fxs=document.querySelectorAll('.fxs')
        for(i=0;i<fxs.length;i++){
            
            if(fx.checked==true){
                fxs[i].isChecked=true
                console.log(dataArr);
                console.log(fxs[i].isChecked);
                
            }else{
                fxs[i].isChecked=false
                
            }
        }
        xr()
    }
    function jian(index){
        if(dataArr[index].num<1){
            dataArr[index].num=1
        }else{
            dataArr[index].num--
        }
        xr()
    }
    function jia(index){
        dataArr[index].num++
        xr()
    }
    function del(index){
        dataArr.splice(index,1)
        xr()
    }
</script>